<!-- 颜色选择框 -->
<template>
  <div contenteditable="true" class="select-out" id="color-picker">
    <div id="color-show"></div>
    <div id="color-value"></div>
    <div class="color-download">
      <svg focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Colorpicker from '../../public/lib/colorpicker'

const propData = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

let colorPickerObj

onMounted(() => {
  colorPickerObj = new Colorpicker({
    el: 'color-picker', //元素id
    color: propData.modelValue , //默认颜色
    change: function (elem, hex) {
      //选中颜色发生改变时事件
      document.getElementById('color-show').style.backgroundColor = hex
      document.getElementById('color-value').innerText = hex
      emit('update:modelValue',hex)
    }
  })
})

// 修改颜色
const changeColor = (hex) => {
  colorPickerObj.hsb = colorPickerObj.hexToHsb(hex)
  colorPickerObj.setValue(colorPickerObj.hexToRgb(hex))
  colorPickerObj.setColorByInput(hex)
}

defineExpose({
  changeColor
})

</script>

<style lang='scss' scoped>
.select-out{
  width: 100%;
  height: 32px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: 2px;
  transition: all 0.3s;
  caret-color: rgba(0,0,0,0);
  background-color: #fff;
  cursor: pointer;
  display: flex;
  #color-show{
    display: inline-block;
    max-width: 20px;
    min-width: 20px;
    margin: auto 0;
    zoom: 1;
    height: 20px;
    flex: 1;
  }
  #color-value{
    margin-left: 10px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    flex: 5;
    line-height: 20px;
    text-align: center;
  }
  .color-download{
    flex: 1;
    color: #00000040;
    font-size: 12px;
    line-height: 26px;
    text-align: right;
  }
}
.select-out:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
    border-right-width: 1px !important;
    outline: 0;
}
.select-out:hover {
    border-color: #40a9ff;
}
</style>
